<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="xbsj-labels" content="Earth示例">
    </meta>
    <title>效果-泛光</title>
    <!-- 0 引入js文件：XbsjEarth.js和vue.min.js -->
    <script src="../../XbsjEarth/XbsjEarth.js"></script>
    <script src="./scripts/vue.min.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        input {
            width: 350px;
        }

        .checkbox {
            display: inline-block;
            margin: 5px 0;
            cursor: pointer;
        }

        .shadowbox {
            width: 20px;
            height: 16px;
        }

        .defultbtn {
            display: inline-block;
            text-align: center;
            min-width: 60px;
            height: 38px;
            padding: 0 10px;
            line-height: 38px;
            border-radius: 100px;
            border: 1px solid #C9C9C9;
            background-color: #FFF;
            color: #555;
            cursor: pointer;
            margin-bottom: 4px;
        }

        .defultbtn:hover {
            background-color: #b3daf8;
        }

        .btnon {
            background-color: #1E9FFF;
            color: #fff;
            border: 1px solid #1E9FFF;
        }
    </style>
</head>

<body>
    <div id="vueApp" style="width: 100%; height: 100%; background: grey; position: relative;">
        <earth-comp></earth-comp>
    </div>

    <script>
        // 1 创建Earth的vue组件
        var EarthComp = {
            template: `
                <div style="width: 100%; height: 100%">
                    <div ref="earthContainer" style="width: 100%; height: 100%">
                    </div>
                    <div class="box" style="position: absolute; left: 18px; top: 18px; color: white; background: rgba(0, 0, 0, 0.6); padding: 20px; border-radius: 25px;min-width:350px; font-size:24px; font-family: 宋体;">
                        <div class="defultbtn" :class="{'btnon':enabled}" @click="enabled = !enabled">泛光</div><br/>
                        <span @click="glowOnly = !glowOnly" class="checkbox"><input class="shadowbox" type="checkbox" v-model="glowOnly">仅发光图</span><br/>
                        <span>对比度：{{contrast}}</span><br/><input type="range" min="0" step="1" max="255" v-model.number="contrast"><br/>
                        <span>亮度：{{brightness}}</span><br/><input type="range" min="-5" step="0.1" max="5" v-model.number="brightness"><br/>
                        <span>delta：{{delta}}</span><br/><input type="range" min="0" step="0.1" max="5" v-model.number="delta"><br/>
                        <span>sigma：{{sigma}}</span><br/><input type="range" min="0" step="0.1" max="5" v-model.number="sigma"><br/>
                        <span>stepSize：{{stepSize}}</span><br/><input type="range" min="1" step="0.1" max="10" v-model.number="stepSize"><br/>
                    </div>
                </div>
            `,
            data() {
                return {
                    _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
                    enabled: true,
                    glowOnly: false,
                    contrast: 0,
                    brightness: 0,
                    delta: 0,
                    sigma: 0,
                    stepSize: 0
                };
            },
            // 1.1 资源创建
            mounted() {
                // 1.1.1 创建地球
                var earth = new XE.Earth(this.$refs.earthContainer);

                this._earth = earth;

                // 1.1.2 场景配置
                // 默认显示天地图影像
                earth.sceneTree.root = {
                    "children": [{
                        "ref": 'tileset',
                        "czmObject": {
                            "xbsjType": "Tileset",
                            "name": "白模测试",
                            "url": "//lab.earthsdk.com/model/908311a0ac2f11e99dbd8fd044883638/tileset.json",
                            "luminanceAtZenith": 0.8, // 提高亮度
                            "xbsjPosition": [
                                2.120577669988032,
                                0.545203009169497,
                                9.313225746154785e-10
                            ],
                            "skipLevelOfDetail": false
                        }
                    }, {
                        "czmObject": {
                            "xbsjType": "Imagery",
                            "name": "百度暗色风格",
                            "xbsjImageryProvider": {
                                "XbsjImageryProvider": {
                                    "url": "//api0.map.bdimg.com/customimage/tile?=&x={x}&y={y}&z={z}&scale=1&customid=midnight",
                                    "srcCoordType": "BD09",
                                    "dstCoordType": "WGS84",
                                    "rectangle": [
                                        -3.141592653589793,
                                        -1.5707963267948966,
                                        3.141592653589793,
                                        1.5707963267948966
                                    ]
                                },
                            }
                        }
                    }
                    ]
                }

                var tileset1 = earth.sceneTree.$refs.tileset.czmObject;

                // 设置相机位置
                // earth.camera.position.toString()和earth.camera.toAllJSONStr()这两个方法可获取相机位置
                earth.camera.position = [2.1204784429287287, 0.5453567434019185, 984.8776452043272];
                earth.camera.rotation = [2.6041692528943043, -0.8105587768466127, 0.002203744534782004];

                // 1.1.3 数据绑定
                this._enabledUnbind = XE.MVVM.bind(this, 'enabled', earth.postProcess.bloom, 'enabled');
                this._glowOnlyUnbind = XE.MVVM.bind(this, 'glowOnly', earth.postProcess.bloom, 'glowOnly');
                this._contrastUnbind = XE.MVVM.bind(this, 'contrast', earth.postProcess.bloom, 'contrast');
                this._brightnessUnbind = XE.MVVM.bind(this, 'brightness', earth.postProcess.bloom, 'brightness');
                this._deltaUnbind = XE.MVVM.bind(this, 'delta', earth.postProcess.bloom, 'delta');
                this._sigmaUnbind = XE.MVVM.bind(this, 'sigma', earth.postProcess.bloom, 'sigma');
                this._stepSizeUnbind = XE.MVVM.bind(this, 'stepSize', earth.postProcess.bloom, 'stepSize');

                // 1.1.4 设置初始值
                earth.postProcess.bloom.enabled = true;

                // only for Debug
                window.earth = earth;
                window.tileset = tileset1;
            },
            methods: {
            },
            // 1.2 资源销毁
            beforeDestroy() {
                // vue程序销毁时，需要清理相关资源
                this._enabledUnbind = this._enabledUnbind && this._enabledUnbind();
                this._glowOnlyUnbind = this._glowOnlyUnbind && this._glowOnlyUnbind();
                this._contrastUnbind = this._contrastUnbind && this._contrastUnbind();
                this._brightnessUnbind = this._brightnessUnbind && this._brightnessUnbind();
                this._deltaUnbind = this._deltaUnbind && this._deltaUnbind();
                this._sigmaUnbind = this._sigmaUnbind && this._sigmaUnbind();
                this._stepSizeUnbind = this._stepSizeUnbind && this._stepSizeUnbind();
                this._earth = this._earth && this._earth.destroy();
            },
        }

        // 2 创建vue程序
        // XE.ready()用来加载Cesium.js等相关资源
        XE.ready().then(() => {
            var app = new Vue({
                el: '#vueApp',
                components: {
                    EarthComp,
                },
            });
        });
    </script>
</body>

</html>